<template>
  <div class="listBar-cot">
    <el-input
      v-model="searchInput"
      style="margin: 5px; width: 96%"
      clearable
      placeholder="请输入服务"
      prefix-icon="el-icon-search"
      @input="handleSearch"
    ></el-input>
    <!--    <div style="display: flex; justify-content: space-around;">-->
    <!--      <div>-->
    <!--        <img :src="require('@/assets/header_images/current.png')" width="30px" height="30px" alt="">-->
    <!--      </div>-->
    <!--      <div>-->
    <!--        &lt;!&ndash;        <i class="fa fa-star" aria-hidden="true"></i>&ndash;&gt;-->
    <!--        <img :src="require('@/assets/header_images/favorite.png')" width="30px" height="30px" alt="">-->
    <!--      </div>-->
    <!--      <div>-->
    <!--        <img :src="require('@/assets/header_images/zjj.png')" width="30px" height="30px" alt="">-->
    <!--      </div>-->
    <!--      <div>-->
    <!--        <img :src="require('@/assets/header_images/zjjsc.png')" width="30px" height="30px" alt="">-->
    <!--      </div>-->
    <!--    </div>-->
    <el-tabs
      type="border-card"
      style="margin: 5px; width: 96%"
      :before-leave="switchTabs"
    >
      <el-tab-pane>
        <span slot="label">
          <i class="fa fa-square" aria-hidden="true"></i>
          <!--          <i class="el-icon-folder"></i>-->
          <!--          <img :src="require('@/assets/header_images/current.png')" width="30px" height="30px" alt="">-->
        </span>
        <div class="drag-cot-container">
          <div
            v-for="(item, index) in configList"
            :key="index"
            class="drag-cot"
            draggable="true"
            @drag="drag(item)"
            @dragend="dragend(item)"
          >
            <p style="margin-left: 10px">
              {{ item.label }}
            </p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <i class="fa fa-sticky-note"></i>
          <!--          <i class="fa fa-star" aria-hidden="true"></i>-->
          <!--          <img :src="require('@/assets/header_images/favorite.png')" width="30px" height="30px" alt="">-->
        </span>
        <div class="drag-cot-container">
          <div
            v-for="(item, index) in configList"
            :key="index"
            class="drag-cot"
            draggable="true"
            @drag="drag(item)"
            @dragend="dragend(item)"
          >
            <p style="margin-left: 10px">
              {{ item.label }}
            </p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <i class="fa fa-square-o" aria-hidden="true"></i>
          <!--           <img :src="require('@/assets/header_images/zjj.png')" width="30px" height="30px" alt="">-->
        </span>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <i class="fa fa-sticky-note-o" aria-hidden="true"></i>
          <!--          <img :src="require('@/assets/header_images/zjjsc.png')" width="30px" height="30px" alt="">-->
        </span>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
const mouseXY = { x: null, y: null };

export default {
  name: "PackageListSide",
  props: ["graph"],
  data() {
    return {
      searchInput: "",
      configList: [],
      allConfigList: [],
      // 用于服务列表搜索
      tmpPage: {
        pageSize: 15,
        pageNum: 1,
        filterKey: "",
      },
      selectTabs: 0,
    };
  },
  mounted() {
    this.initPackageList();

    document.getElementById("container").addEventListener(
      "dragover",
      function (e) {
        mouseXY.x = e.clientX;
        mouseXY.y = e.clientY;
      },
      false
    );
  },
  methods: {
    drag: function () {
      // const parentRect = document
      //   .getElementById("container")
      //   .getBoundingClientRect();
      // let mouseInGrid = false;
      // if (
      //   mouseXY.x > parentRect.left &&
      //   mouseXY.x < parentRect.right &&
      //   mouseXY.y > parentRect.top &&
      //   mouseXY.y < parentRect.bottom
      // ) {
      //   mouseInGrid = true;
      // }
    },
    nodeConfig(item, x, y) {
      let config = "";
      const time = new Date().getTime();

      // 链接桩3种状态 1、in | 只允许被连  2、out | 只允许输出  3、any | 不限制
      switch (item.type) {
        case "onlyIn":
          config = {
            x: x,
            y: y,
            width: 180,
            height: 40,
            shape: "dag-onlyIn",
            data: item,
            ports: {
              groups: {
                top: {
                  position: "top",
                  attrs: {
                    circle: {
                      r: 4,
                      magnet: true,
                      stroke: "#C2C8D5",
                      strokeWidth: 1,
                      fill: "#fff",
                    },
                  },
                },
              },
              items: [
                {
                  id: `in-${time}`,
                  group: "top", // 指定分组名称
                },
              ],
            },
          };
          break;
        case "database":
          config = {
            x: x,
            y: y,
            width: 180,
            height: 40,
            shape: "dag-node",
            data: item,
            ports: {
              groups: {
                top: {
                  position: "top",
                  attrs: {
                    circle: {
                      r: 4,
                      magnet: true,
                      stroke: "#C2C8D5",
                      strokeWidth: 1,
                      fill: "#fff",
                    },
                  },
                },
                bottom: {
                  position: "bottom",
                  attrs: {
                    circle: {
                      r: 4,
                      magnet: true,
                      stroke: "#C2C8D5",
                      strokeWidth: 1,
                      fill: "#fff",
                    },
                  },
                },
              },
              items: [
                {
                  id: `in-${time}`,
                  group: "top", // 指定分组名称
                },
                {
                  id: `out-${time}`,
                  group: "bottom", // 指定分组名称
                },
              ],
            },
          };
          break;
      }
      return config;
    },
    dragend: function (item) {
      const parentRect = document
        .getElementById("container")
        .getBoundingClientRect();
      let mouseInGrid = false;
      if (
        mouseXY.x > parentRect.left &&
        mouseXY.x < parentRect.right &&
        mouseXY.y > parentRect.top &&
        mouseXY.y < parentRect.bottom
      ) {
        mouseInGrid = true;
      }
      if (mouseInGrid === true) {
        this.$emit("addNode", this.nodeConfig(item, mouseXY.x, mouseXY.y));
        this.filterPackageList();
      }
    },
    handleSearch() {
      this.configList = [];
      this.allConfigList = [];
      this.tmpPage.filterKey = this.searchInput;
      this.$appStoreApi
        .getAppInfoListByPage(this.tmpPage)
        .then((res) => {
          for (let i = 0; i < res.data.records.length; i++) {
            const packageInfo = res.data.records[i];
            let tmp = {};
            tmp.type = "database";
            tmp.label = packageInfo.appZhname;
            tmp.name = packageInfo.appName;
            tmp.appId = packageInfo.id;
            this.configList.push(tmp);
            this.allConfigList.push(tmp);
          }
          this.filterPackageList();
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    initPackageList(selected) {
      this.configList = [];
      this.allConfigList = [];
      this.$appStoreApi.getAppInfoListByPage(this.tmpPage).then((res) => {
        if (res && res.code === 200) {
          for (let i = 0; i < res.data.records.length; i++) {
            const packageInfo = res.data.records[i];
            let tmp = {};
            tmp.type = "database";
            tmp.label = packageInfo.appZhname;
            tmp.name = packageInfo.appName;
            tmp.appId = packageInfo.id;
            this.configList.push(tmp);
            this.allConfigList.push(tmp);
          }
          // this.configList.sort((a, b) => {
          //   return a.label.localeCompare(b.label);
          // });
          // console.log(this.configList);
          this.filterPackageList();
        }
      });
    },
    filterPackageList() {
      this.configList = [];
      let graphInfo = this.graph.toJSON({ diff: true });
      this.configList = this.allConfigList.filter(
        (itemA) =>
          !graphInfo.cells.some((cell) => cell.data.appId === itemA.appId)
      );
    },
    filterFavorite() {
      this.configList = [];
      this.allConfigList = [];
      this.$appStoreApi.pageListPackageFavorite(this.tmpPage).then((res) => {
        if (res && res.code === 200) {
          for (let i = 0; i < res.data.records.length; i++) {
            const packageInfo = res.data.records[i];
            let tmp = {};
            tmp.type = "database";
            tmp.label = packageInfo.appZhname;
            tmp.name = packageInfo.appName;
            tmp.appId = packageInfo.id;
            this.configList.push(tmp);
            this.allConfigList.push(tmp);
          }
          this.filterPackageList();
        }
      });
    },
    switchTabs(to, from) {
      if (to === "0" && from !== undefined) {
        this.initPackageList();
      } else if (to === "1") {
        console.log(11);
        this.filterFavorite();
      } else if (to === "2") {
        console.log(22);
      } else if (to === "3") {
        console.log(33);
      }
      return true;
    },
  },
};
</script>
<style lang="css" scoped>
.drag-cot-container {
  height: 66vh;
  /* 内容超出高度时纵向滚动条显示 */
  overflow-y: auto;
}

.drag-cot {
  height: 50px;
  border: 1px dotted #5a5e66;
  margin: 5px 20px 0 5px;
}
</style>
